<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>分类</title>
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/global.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/pace-theme-flash.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/d-audio.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/myPagination.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/index.css">
    <link rel="shortcut icon" href="http://img.wzfdepress.com/avatar.jpg">
    <style rel="stylesheet">
        .lazy-image {
            background: url('http://wzfdepress.com/static/img/loading.gif') no-repeat center;
            background-size: 26% 35%;
            height: 100%;
            width: 100%;
        }
    </style>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!--PC导航栏-->
    <nav class="nav-bar-holder">
        <div class="nav-bar" id="nav-bar">
            <div class="logo-box">
                <a href="index.html" class="blog-title ta-c"><img style="vertical-align: top;" alt="logo"
                        src="http://img.wzfdepress.com/avatar.jpg" /></a>
            </div>
            <div class="nb-a-holder" id="home"><a class="nb-a ta-c" href="index.html">首页</a></div>
            <div class="nb-a-holder"><a id="active" class="nb-a ta-c" href="category.html">分类</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="archive.html">归档</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="link.html">友情链接</a></div>
            <!--搜索框-->
            <div id="search-nb">
                <span class="search-s fl">
                    <label for="search-input"></label><input class="fl" type="text" id="search-input"
                        placeholder="请输入关键字">
                    <a class="search-icon fl" onclick="search_by_key()" href="javascript:void(0);"></a>
                </span>
            </div>
<!--            <div class="nb-a-holder-last">-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="login.html">登录</a>-->
<!--                </div>-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="register.html">注册</a>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </nav>
    <!--mobile导航栏-->
    <nav class="mobile-nav">
        <div class="logo-box">
            <a href="index.html" class="blog-title ta-c">
                <img style="vertical-align: top;" alt="logo" src="http://img.wzfdepress.com/avatar.jpg" /></a>
        </div>
        <a id="mobile_cate" style="background-image: url('http://wzfdepress.com/static/img/cate.svg')" href="javascript:void(0);"></a>
    </nav>
    <ul id="nav-m-list">
        <li id="cancel-li"><a class="fr" id="cancel" href="javascript:void(0);"></a></li>
        <li id="m-img-li">
            <img id="m-img" alt="苍茫误此生" src="http://img.wzfdepress.com/avatar.jpg">
        </li>
        <li>
            <span class="search-s fl">
                <label for="search-input-m"></label><input class="fl" type="text" id="search-input-m" placeholder="关键词">
                <a class="search-icon fl" onclick="m_search()" href="javascript:void(0);"></a>
            </span>
        </li>
        <li><a class="w-h-100 fl" href="index.html">首页</a></li>
<!--        <li><a class="w-h-100 fl" href="login.html">登录</a></li>-->
<!--        <li><a class="w-h-100" href="register.html">注册</a></li>-->
        <li><a class="w-h-100 fl" href="category.html">分类</a></li>
        <li><a class="w-h-100 fl" href="archive.html">归档</a></li>
        <li><a class="w-h-100 fl" href="link.html">友情链接</a></li>
    </ul>
    <div id="d-audio" class="d-audio" style="width: 150px; z-index: 99; position: fixed; bottom: 5px; left: 5px;"></div>
    <!--主体-->
    <div class="big-container">
        <article class="article">
            <!--右容器-->
            <div class="right-holder">
                <div class="column-container">
                    <ul class="column_box" id="like-box">
                        <li class="column-title">
                            <span class="at-sort b-b-ece fl"><a class="at-sort-comment-a c-666 fl">分类</a></span>
                        </li>
                    </ul>
                </div>

            </div>

            <!--左容器-->
            <div class="result-box fl">
                <!--文章内容-->
                <div id="article-holder" style="width: 100%; float: left">
<!--                    <div class="article-box">-->
<!--                        <div class="ab-content">-->
<!--                            <a href="article.html" class="article-img-box">-->
<!--                                <img class="lazy-image article-img" data-src="http://wzfdepress.com/static/img/article.jpg" alt="" src="">-->
<!--                            </a>-->
<!--                            <div class="article-title">-->
<!--                                <a href="article.html">栈和队列</a>-->
<!--                            </div>-->
<!--                            <div class="article-cate"><a href="category.html">后台</a>-->
<!--                                <a href="tag.html">C++</a>-->
<!--                            </div>-->
<!--                            <div class="article-detail-box c-666">-->
<!--                                二. 栈和队列-->

<!--                                1. 栈-->

<!--                                (1) 概念-->

<!--                                栈只能在一端进行插入或者删除操作，插入元素称为入栈，删除元素称为出栈。-->

<!--                                在存储结构上分为顺序栈和链栈。主要特点是先进后出（FI-->
<!--                            </div>-->
<!--                            <span class="article-tail-box">-->
<!--                                <i class="fl"-->
<!--                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/read-index.svg')"></i>-->
<!--                                <span class="read-number c-999 fl">47</span>-->
<!--                                <i class="fl"-->
<!--                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/comment-index.svg')"></i>-->
<!--                                <span class="comment-number c-999 fl">0</span>-->
<!--                                <span class="article-date c-999">2019-12-05</span>-->
<!--                                <span class="article-author one-line-overflow c-999">admin</span>-->
<!--                            </span>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>

                <!--分页指示器-->
                <div id="pagination" class="pagination fl"></div>
            </div>

        </article>
    </div>

    <!--尾部-->
    <footer class="footer">
        <div class="footer-line">
            <div class="icon-center">
                <span class="icon-box"><a id="github-icon" target="_blank" href="https://gitee.com/cheerfulwzf"
                                          class="foot-icon"></a>
                </span>
                <span class="icon-box"><a id="qq-icon" target="_blank"
                                          href="tencent://Message/?Uin=2434780193&amp;websiteName=q-zone.qq.com&amp;Menu=yes"
                                          class="foot-icon"></a>
                </span>
            </div>
        </div>
        <div class="footer-line">Powered By <a href="mailto:cheerful0120@qq.com"
                                               target="_blank">Cheerful</a> • © 2021-10</div>
        <div class="footer-line"><a href="http://beian.miit.gov.cn/" target="_blank"> 蜀ICP备2021024763号</a>
    </footer>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/sweetalert.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/pace.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/base.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/d-audio.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/myPagination.js"></script>
    <script type="text/javascript">
        // 分页
        // const pagination = new myPagination({
        //     id: 'pagination',
        //     curPage: 1, //初始页码
        //     pageTotal: 3, //总页数
        //     pageAmount: 10, //每页多少条
        //     dataTotal: 29, //总共多少条数据
        //     pageSize: 3, //可选,分页个数
        //     //showPageTotalFlag: true, //是否显示数据统计
        //     getPage: function (page) {
        //         console.log("current page: ", page);
        //     }
        // });


        // 图片懒加载
        const lazyImage = new LazyImage('.lazy-image');

        $(function () {
            listCategoryWithCount();
            getArticleByCategory(1);
        })

        /**
         * 获取某个分类的文章
         * @param categoryId
         */
        function getArticleByCategory(categoryId){
            $.ajax({
                url:"/article/getArticleByCategory/"+categoryId,
                type:"get",
                success:function (data) {
                    let html='';
                    for (let i = 0; i < data.data.length; i++) {
                        let item=data.data[i];
                        let tagHtml='';
                        for (let j = 0; j < item.categoryNameList.length; j++) {
                            tagHtml+=`<a href="category.html">`+` `+item.categoryNameList[j]+` `+`</a>`;
                        }
                        html+=`<div class="ab-content">
                            <a href="article/`+item.id+`.html" class="article-img-box">
                                <img class="lazy-image article-img" src="`+item.coverId+`">
                            </a>
                            <div class="article-title">
                                <a href="article/`+item.id+`.html">`+item.title+`</a>
                            </div>
                            <div class="article-cate">
                            `+tagHtml+`
                            </div>
                            <div class="article-detail-box c-666">
                                `+item.blogDesc+`
                            </div>
                            <span class="article-tail-box">
                                <i class="fl"
                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/read-index.svg')"></i>
                                <span class="read-number c-999 fl">浏览量：`+item.viewNum+`</span>
                                <i class="fl"
                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/comment-index.svg')"></i>
<!--                                <span class="comment-number c-999 fl">0</span>-->
                                <span class="article-date c-999">`+item.gmtModified+`</span>
                                <span class="article-author one-line-overflow c-999">   `+item.authorName+`</span>
                            </span>
                        </div>`;
                    }
                    // $("#article-holder").empty();
                    $("#article-holder").html(html);
                }
            })
        }

        function listCategoryWithCount() {
            $.ajax({
                url:"/category/listWithCount",
                type:"get",
                success:function (data) {
                    let html="";
                    for (let i = 0; i < data.data.length; i++) {
                        let item=data.data[i];
                        html+=`<li class="column-category" onclick="getArticleByCategory(`+item.id+`)">
                                    <a href="#">
                                        `+item.categoryName+`&nbsp;&nbsp;`+item.count+`&nbsp;篇
                                    </a>
                                </li>`;
                    }
                    $("#like-box").html(html);
                }
            })
        }
    </script>
</body>

</html>